<template>
	<div class="div-user-sum">
		<div class="div-top">
			<span>题库管理</span>
		</div>
		<span class="search_label">课件名称:</span>
		<el-input v-model='searchForm.coursewareName' placeholder="请输入课件名称" style="width:207px;margin-left: 10px" clearable></el-input>
		<span class="search_label">发布状态:</span>
		<el-select v-model='searchForm.isPublish' placeholder="试题类型" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in isPublishs" :key="item.value" :label="item.name" :value="item.value">
			</el-option>
		</el-select>
		<span class="search_label">所属专业:</span>
		<el-select v-model='searchForm.majorId' placeholder="请选择专业" @change='currentChange(1)' style="width:207px;margin-left: 10px" clearable>
			<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
		<el-button type="primary" @click="currentChange(1)" style="margin-left: 5px">搜索</el-button>
		<div class="topic_tables green_table" style="margin: 20px;">
			<el-table :data="dataList" border stripe>
				<el-table-column prop="coursewareName" align="center" label="课件名称" />
				<el-table-column prop="majorName" label="所属专业" align="center" />
				<el-table-column prop="isPublish" label="发布状态" align="center">
					<template slot-scope="scope">
						<span v-for='item in isPublishs' v-if="item.value == scope.row.isPublishs">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="创建时间" align="center" />
				<el-table-column prop="createUserName" label="创建人" align="center" />
				<el-table-column label="操作" align="center" >
					<template slot-scope="scope">
						<el-button size='small' type='success' @click="openHistory(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="margin: 10px; text-align: center;">
			<el-pagination background @current-change="currentChange" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" layout="prev, pager, next, total, jumper" :total="searchForm.total">
			</el-pagination>
		</div>
		<el-dialog title="课件使用记录" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true' :visible.sync="historyShow" width="800px">
			<el-table :data="historyList" border stripe>
				<el-table-column prop="recordName" align="center" label="课件记录名称" />
				<el-table-column prop="organizationNames" label="上课班级" align="center" />
				<el-table-column prop="duration" label="授课时长（秒）" align="center" />
				<el-table-column prop="startTime" label="上课时间" align="center">
					<template slot-scope="scope">
						{{scope.row.startTime}} - {{scope.row.endTime}}
					</template>
				</el-table-column>
				<el-table-column prop="state" label="上课状态" align="center">
					<template slot-scope="scope">
						<span v-for='item in states' v-if="item.value == scope.row.states">{{item.name}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="closeHistory">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { majorList } from "@/api/major.js"
	import { coursewareAdminList, coursewareRecordAdminList } from "@/api/courseware.js"
	export default {
		data() {
			return {
				historyShow: false,
				historyList: [],
				dataList: [],
				majors: [],
				isPublishs: [{
					value: "1",
					name: '已发布'
				}, {
					value: "2",
					name: '未发布'
				}],
				states: [{
					value: "1",
					name: '上课中'
				}, {
					value: "2",
					name: '已结束'
				}],
				searchForm: {
					coursewareName: '',
					isPublish: '',
					majorId: '',
					pageNum: 1,
					pageSize: 8,
					total: 0,
				},
			}
		},
		computed: {
			getWidth() {
				return "width:" + this.uploadForm.uploadPress + "%;"
			},
		},
		created() {
			this.getMajors();
			this.getDataList();
		},
		mounted() {

		},
		methods: {
			openHistory(item) {
				coursewareRecordAdminList({
					coursewareId: item.coursewareId
				}).then(res => {
					this.historyShow = true;
					this.historyList = res.data || [];
				})
			},
			closeHistory() {
				this.historyShow = false;
				this.historyList = [];
			},
			currentChange(pageNum) {
				this.searchForm.pageNum = pageNum;
				this.getDataList();
			},
			getDataList() {
				coursewareAdminList(this.searchForm).then(async res => {
					this.dataList = res.data.list;
					this.searchForm.total = res.data.total;
				})
			},
			getMajors() {
				majorList().then(res => {
					this.majors = res.data
				})
			},
		},
	}
</script>